<!--
 * @Date: 2021-08-06 15:21:58
 * @LastEditTime: 2022-01-13 16:22:18
-->
<!--
 * @Date: 2021-08-06 15:21:58
 * @LastEditTime: 2021-09-23 16:48:47
-->
<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>FBA仓调拨单</h2>
    </div> -->
    <!-- 搜索 -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'fbaAllotOrder@save'" size="small" type="primary" icon="el-icon-circle-plus-outline" @click="toAddAllotOrder">创建调拨单</el-button>
        <el-button v-action="'fbaAllotOrder@SubmitAudit'" size="small" type="primary" @click="submitAudit">提交审核</el-button>
        <el-button v-action="'fbaAllotOrder@changeAuditStatus'" size="small" type="primary" @click="showAuditDialog()">调出审核</el-button>
        <el-button v-action="'fbaAllotOrder@batchDelete'" size="small" type="danger" @click="dels(0)">批量删除</el-button>
        <el-button v-action="'fbaAllotOrder@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <div style="margin-top:20px;" />
    <div v-loading="loading">
      <el-table :data="data" border fit :row-class-name="tableRowClassName" :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column label="操作" align="center" width="135" fixed>
          <template slot-scope="scope">
            <span v-if="scope.row.audit_status !== 2" v-action="'fbaAllotOrder@update'" class="edit_style" style="margin: 0;" @click="handleUpdate(scope.row)">编辑</span>
            <span v-if="scope.row.audit_status !== 2" v-action="'fbaAllotOrder@batchDelete'" class="delete_style" style="margin: 0;" @click="dels(scope.row.id)">删除</span>
            <span v-action="'fbaAllotOrder@read'" class="edit_style" style="margin: 0;" @click="toInfo(scope.row.id)">详情</span>
          </template>
        </el-table-column>
        <el-table-column label="调出实体仓" prop="entity_warehouse" align="center" width="238" />
        <el-table-column label="调出虚拟仓" prop="virtual_warehouse" align="center" width="220" />
        <el-table-column label="调入FBA仓" prop="fba_warehouse" align="center" width="202" />
        <el-table-column label="物流费" prop="logistics_fee" align="center" width="112" />
        <el-table-column align="center" label="系统SKU|商品名称|数量|贴标费|打托费|出库费" width="500px" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.products" :key="index">
              <el-divider v-if="index !==0" class="line_style" />
              <span>{{ item.goods_code }}<b>|</b>{{ item.goods_name }}<b>|</b>{{ item.number }}<b>|</b>{{ item.label_price }}<b>|</b>{{ item.pallet_price }}<b>|</b>{{ item.outbound_price }} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="配件SKU|配件名称|数量|贴标费|打托费|出库费" width="500px" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.parts" :key="index">
              <el-divider v-if="index !==0" class="line_style" />
              <span>{{ item.goods_code }}<b>|</b>{{ item.goods_name }}<b>|</b>{{ item.number }}<b>|</b>{{ item.label_price }}<b>|</b>{{ item.pallet_price }}<b>|</b>{{ item.outbound_price }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="贴标费" prop="label_price" align="center" width="112" />
        <el-table-column label="打托费" prop="pallet_price" align="center" width="112" />
        <el-table-column label="出库费" prop="outbound_price" align="center" width="112" /> -->
        <el-table-column label="Bill of Lading Number" prop="bill_of_lading_number" align="center" width="112">
          <template slot-scope="scope">
            <app-text :text="scope.row.bill_of_lading_number" />
          </template>
        </el-table-column>
        <el-table-column label="Amazon PO Id" prop="amazon_po_id" align="center" width="112">
          <template slot-scope="scope">
            <app-text :text="scope.row.amazon_po_id" />
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="audit_status" align="center" width="112">
          <template slot-scope="scope">
            <dic-values :dictionaries="DICTIONARIES.auditStatus" :code="scope.row.audit_status" />
          </template>
        </el-table-column>
        <el-table-column label="审核原因" prop="audit_status" align="center" width="112">
          <template slot-scope="scope">
            <span>{{ scope.row.audit_notes || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="created_by_name" align="center" width="112" />
        <el-table-column label="创建时间" prop="created_at" align="center" width="174" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" width="112" />
        <el-table-column label="修改时间" prop="updated_at" align="center" width="174" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <audit-dialog ref="auditDialog" :base-fields="baseFields" :number-desc="numberDesc" :change-audit-url="changeAuditUrl" :show-parts="true" :info-url="infoUrl" @submit="auditHandler" />
    <warehouse-order-info-dialog ref="infoDialog" :base-fields="baseFields" :number-desc="numberDesc" />
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="仓库调拨单导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import auditDialog from '../components/auditDialog'
import warehouseOrderInfoDialog from '../components/warehouseOrderInfoDialog'
import dicValues from '@/components/dicTransform/index'
import appText from '@/components/appText/index'
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
export default {
  name: 'FbaAllotOrder',
  directives: {
    action
  },
  components: {
    auditDialog,
    warehouseOrderInfoDialog,
    dicValues,
    appText,
    DownModul
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 355,
      componentName: 'FbaAllotOrder',
      url: '/fba-allot-order',
      formItems: [
        {
          label: '仓库名称',
          key: 'warehouse_name',
          type: 'input',
          placeholder: '请输入仓库名称'
        },
        // {
        //   label: '商品SKU',
        //   key: 'goods_code',
        //   type: 'input',
        //   placeholder: '请输入入库单号'
        // },
        {
          label: 'BOLN',
          key: 'bill_of_lading_number',
          type: 'input',
          placeholder: 'Bill of Lading Number'
        },
        {
          label: 'API',
          key: 'amazon_po_id',
          type: 'input',
          placeholder: 'Amazon PO Id'
        },
        {
          label: '审核状态',
          key: 'audit_status',
          type: 'select',
          filterable: true,
          placeholder: '请选择审核状态',
          options: [
            {
              value: 0,
              label: '待提交'
            },
            {
              value: 1,
              label: '待审核'
            },
            {
              value: 2,
              label: '审核通过'
            },
            {
              value: -1,
              label: '审核驳回'
            }
          ]
        },
        {
          label: '创建时间',
          key: 'dateCreat',
          type: '',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      queryParam: {
        warehouse_name: '',
        audit_status: '',
        bill_of_lading_number: '',
        amazon_po_id: '',
        page: 1,
        limit: 10
      },
      DICTIONARIES: {
        auditStatus: [
          {
            code: 0,
            name: '待提交'
          },
          {
            code: 1,
            name: '待审核'
          },
          {
            code: 2,
            name: '审核通过'
          },
          {
            code: -1,
            name: '审核驳回'
          }
        ]
      },
      baseFields: [
        {
          id: 1,
          label: '调出实体仓',
          prop: 'entity_warehouse'
        },
        {
          id: 2,
          label: '调出虚拟仓',
          prop: 'virtual_warehouse'
        },
        {
          id: 2,
          label: 'FBA仓',
          prop: 'fab_warehouse'
        },
        {
          id: 3,
          label: '发货类型',
          prop: 'delivery_type'
        },
        {
          id: 4,
          label: '配送方式',
          prop: 'shipping_type'
        },
        {
          id: 5,
          label: '是否由客户安排发货',
          prop: 'customer_type'
        },
        {
          id: 6,
          label: '装箱服务',
          prop: 'packing_service'
        },
        {
          id: 7,
          label: '增值服务',
          prop: 'value_added_services'
        },
        {
          id: 8,
          label: '产品换标服务',
          prop: 'label_change_service'
        },
        {
          id: 9,
          label: '外箱贴标服务',
          prop: 'containers_label_service'
        },
        {
          id: 10,
          label: '托盘贴标服务',
          prop: 'pallet_label_service'
        },
        {
          id: 10,
          label: '特殊说明文件',
          prop: 'attachment'
        }
      ],
      numberDesc: {
        label: '调拨数量',
        prop: 'number'
      },
      changeAuditUrl: '/fba-allot-order/change-audit-status',
      infoUrl: '/fba-allot-order',
      exportUrl: '/fba-allot-order-export',
      cachePaths: [
        '/storage/fbaAllotOrder/'
      ],
      optionsModul: [
        {
          key: 'created_at',
          label: '日期'
        },
        {
          key: 'created_by_name',
          label: '运营'
        },
        {
          key: 'delivery_type_text',
          label: '提货方式'
        },
        {
          key: 'shipping_type_text',
          label: '承运商'
        },
        {
          key: 'bill_of_lading_number',
          label: 'BOL'
        },
        {
          key: 'entity_warehouse',
          label: '调出实体仓'
        },
        {
          key: 'virtual_warehouse',
          label: '调出虚拟仓'
        },
        {
          key: 'fba_warehouse',
          label: '调入FBA仓'
        },
        {
          key: 'audit_status_text',
          label: '审核状态'
        },
        {
          key: 'logistics_fee',
          label: '物流费'
        },
        {
          key: 'goods_name',
          label: '商品名称'
        },
        {
          key: 'goods_code',
          label: '商品sku'
        },
        {
          key: 'number',
          label: '商品数量'
        },
        {
          key: 'pallet_number',
          label: '托盘数量'
        },
        {
          key: 'label_price',
          label: '贴标费'
        },
        {
          key: 'pallet_price',
          label: '打托费'
        },
        {
          key: 'outbound_price',
          label: '出库费'
        }
      ]
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    beforeSearch() {
      const vm = this
      const { dateCreat } = vm.queryParam
      if (dateCreat && dateCreat.length > 0) {
        vm.queryParam.start_at_creat = vm.queryParam.dateCreat[0]
        vm.queryParam.end_at_creat = vm.queryParam.dateCreat[1]
      } else {
        vm.queryParam.start_at_creat = ''
        vm.queryParam.end_at_creat = ''
      }
    },
    // 导出
    handleExport() {
      const vm = this
      // const { warehouse_name, audit_status } = vm.queryParam
      // const params = { warehouse_name, audit_status }
      // vm.handleExportxlsx(vm.exportUrl, { params })
      vm.downLoadParams = vm.queryParam
      vm.formVisibleDown = true
    },
    // 去详情
    toInfo(id) {
      const vm = this
      vm.$router.push({ path: `/storage/fbaAllotOrder/info/${id}`, query: { title: 'FBA调拨单详情' } })
    },
    // 添加
    toAddAllotOrder() {
      const vm = this
      window.localStorage.removeItem('fbaAllotOrder')
      vm.$router.push({ path: '/storage/fbaAllotOrder/add' })
    },
    // 批量删除
    dels(id) {
      const vm = this
      let ids = []
      if (id) {
        ids.push(id)
      } else {
        ids = vm.selectedIds
      }
      vm.$confirm(`确定${id ? '' : '批量'}删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$http.post('/fba-allot-order/batch-delete', { ids }).then((res) => {
          vm.$message.success('删除成功')
          vm.getList()
        })
      })
    },
    // 修改
    /**
     * @description:
     * @param {*} row
     * @return {*}
     */
    handleUpdate(row) {
      const vm = this
      window.localStorage.removeItem('fbaAllotOrder')
      vm.$router.push({ path: `/storage/fbaAllotOrder/add/${row.id}`, query: { title: '编辑FBA调拨单' } })
    },
    // 提交审核
    submitAudit() {
      const vm = this
      if (vm.selectedIds.length <= 0) {
        vm.$message.error('请至少选择一条数据')
        return
      }
      // 判断列表是否都是 待提交状态
      const isEveryToSubmit = vm.data
        .filter((e) => vm.selectedIds.includes(e.id))
        .every((e) => [0, -1].includes(e.audit_status))
      if (isEveryToSubmit) {
        vm.$confirm(`确定提交审核吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$http
            .post('/fba-allot-order/submit-audit', { ids: vm.selectedIds })
            .then((res) => {
              vm.$message.success('提交审核成功')
              vm.getList()
            })
        })
      } else {
        vm.$message.error('选择数据须都是待提交或审核驳回状态')
      }
    },
    // 显示提交审核弹窗 {type} 1 调出 2 调入
    showAuditDialog(type) {
      const vm = this
      if (vm.selectedIds.length <= 0) {
        vm.$message.error('请至少选择一条数据')
        return
      }
      if (vm.selectedIds.length > 1) {
        vm.$message.error('请至多选择一条数据')
        return
      }
      const firstId = vm.selectedIds[0]
      const first = vm.data.find((e) => e.id === firstId)
      // 调出审核
      if (first.audit_status !== 1) {
        vm.$message.error('选择数据必须是待审核状态')
        return
      }
      const auditStatus = [
        {
          label: 2,
          name: '审核通过'
        },
        {
          label: -1,
          name: '审核驳回'
        }
      ]
      vm.$refs['auditDialog'].show({ id: firstId, auditStatus })
    },
    // 审核 handler
    auditHandler() {
      const vm = this
      vm.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
